<template>
  <div class="profile">
    <!-- 导航条 -->
    <van-nav-bar left-arrow title="编辑资料" @click-left="$router.back()" />

    <!-- 编辑区 -->
    <van-cell-group>
      <!--头像区域-->
      <div class="avatar">
        <van-image fit="cover" round :src="user.photo" />
        <van-uploader class="upload" :after-read="afterRead" />
      </div>

      <van-cell
        is-link
        title="名称"
        :value="user.name"
        @click="showNameDialog"
      />
      <van-cell
        is-link
        title="性别"
        :value="user.gender === 0 ? '男' : '女'"
        @click="showGender = true"
      />
      <van-cell is-link title="生日" :value="user.birthday" @click="showDate" />
    </van-cell-group>
    <!-- 修改昵称 -->
    <van-dialog
      v-model="showName"
      title="修改昵称"
      show-cancel-button
      @confirm="saveName"
    >
      <van-field v-model="userName" placeholder="请输入用户名" />
    </van-dialog>
    <!-- 修改性别 -->
    <van-popup v-model="showGender" position="bottom">
      <van-nav-bar
        title="修改性别"
        left-text="取消"
        @click-left="showGender = false"
      />
      <van-cell title="男" is-link @click="saveGender(0)" />
      <van-cell title="女" is-link @click="saveGender(1)" />
    </van-popup>
    <!-- 修改生日 -->
    <!-- 修改日期 -->
    <van-popup v-model="showBirthday" position="bottom">
      <!-- v-model 关联的属性 currentDate 是一个日期对象 供展示日期组件默认选中用户生日日期
      min-date 和max -date 都是日期对象 一个是最小的可选时间, 一个是最大的可选时间
      -->
      <van-datetime-picker
        v-model="currentDate"
        type="date"
        title="选择生日"
        :min-date="minDate"
        :max-date="maxDate"
        @confirm="saveBirthday"
        @cancel="showBirthday = false"
      />
    </van-popup>
    <!-- 图片裁切的弹出层 -->
    <div v-if="isShowMask" class="mask">
      <!-- img属性 是裁切组件绑定属性 值是要裁切的图片
        auto-crop 生成裁切框 完整写法 :auto-crop="true" 简写 auto-crop
        auto-crop-width 和 auto-crop-height  裁切框的宽高
        fixed 固定比例裁切
       -->
      <VueCropper
        ref="cropper"
        :img="img"
        :auto-crop="true"
        auto-crop-width="120"
        auto-crop-height="120"
        fixed
      />
      <van-button type="primary" class="confirm" @click="crop">
        确定
      </van-button>
      <van-button
        type="primary"
        class="cancel"
        @click="isShowMask = false"
      >取消</van-button>
    </div>
  </div>
</template>

<script>
import dayjs from 'dayjs'
import {
  reqGetUserProfile,
  reqUpdateUserInfo,
  reqUpdatePhoto
} from '@/api/user'
import { VueCropper } from 'vue-cropper'
export default {
  name: 'UserProfile',
  components: {
    VueCropper
  },
  data() {
    return {
      // 控制弹层
      showName: false,
      showGender: false,
      showBirthday: false,
      // 当前用户的信息
      user: {},
      userName: '', // 单独存储用户名的
      minDate: new Date(1900, 0, 1), // 最小的时间范围 - 日期对象
      maxDate: new Date(), // 最大的时间范围 - 日期对象
      currentDate: new Date(), // 默认当前的时间 - 日期对象
      isShowMask: false, // 控制图片裁切的弹出层 默认是隐藏的
      img: ''
    }
  },
  created() {
    this.getUserProfile()
  },
  methods: {
    // 获取个人资料
    async getUserProfile() {
      const {
        data: { data }
      } = await reqGetUserProfile()
      // console.log(data)
      this.user = data
    },
    // 显示编辑资料的弹出层
    showNameDialog() {
      this.showName = true
      // 点击弹出框展示后将输入框赋值
      this.userName = this.user.name
    },
    // 提交了昵称修改
    async saveName() {
      // console.log('点击了确认')
      if (
        this.userName.trim().length === 0 ||
        this.userName.trim().length > 7
      ) {
        return this.$toast.fail('昵称长度不合法')
      }
      try {
        await reqUpdateUserInfo({ name: this.userName })
      } catch {
        return this.$toast.fail('昵称已存在')
      }
      // 更新视图
      this.user.name = this.userName
      // 提示用户
      this.$toast.success('更新成功')
    },
    // 提交性别修改 - 性别修改后返回都是女 接口问题
    async saveGender(gender) {
      // 发送请求携带参数
      await reqUpdateUserInfo({ gender })
      // 更新视图
      this.user.gender = gender
      // 提示用户
      this.$toast.success('修改成功')
      // 关闭弹层
      this.showGender = false
    },
    // 显示生日弹出框
    showDate() {
      this.showBirthday = true
      // 将currentDate 改成  user中birthday字段
      console.log(this.user.birthday)
      // 将this.user.birthday包裹成日期对象
      this.currentDate = new Date(this.user.birthday)
    },
    // 完成生日提交编辑
    async saveBirthday() {
      // console.log(this.currentDate) // 日期对象  传递的数据要求的格式是2019-12-20
      // console.log(dayjs(this.currentDate).format('YYYY-MM-DD')) // 字符串格式的2019-12-20
      const birthday = dayjs(this.currentDate).format('YYYY-MM-DD')
      // 发送请求
      await reqUpdateUserInfo({ birthday })
      // 更新视图
      this.user.birthday = birthday
      // 提示用户
      this.$toast.success('更新成功')
      // 关闭弹层
      this.showBirthday = false
    },
    // 文件上传完毕后会触发 after-read 回调函数，获取到对应的 file 对象。
    afterRead(file) {
      // 获取到上传的文件做裁切工作  如果不做裁切  直接file.file 直接复制之前的7步
      console.log(file)
      this.img = file.content // 将上传头像的base64格式图片赋值给裁切组件img属性
      this.isShowMask = true
    },
    // 点击确定裁切图片的方法
    crop() {
      // 对象格式的调用这个方法
      this.$refs.cropper.getCropBlob(async(data) => {
        // do something
        console.log(data)
        // 创建FromData对象
        const fm = new FormData()
        fm.append('photo', data)
        // 发送请求
        const {
          data: {
            data: { photo }
          }
        } = await reqUpdatePhoto(fm)
        // console.log(photo)
        // 5. 更新视图
        this.user.photo = photo
        // 6. 提示
        this.$toast.success('上传成功')
        // 关闭弹层
        this.isShowMask = false
      })
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep {
  .van-nav-bar__text {
    color: #fff;
  }
}
.avatar {
  padding: 20px 0;
  text-align: center;
  position: relative;
  .van-image {
    width: 120px;
    height: 120px;
  }
  .upload {
    opacity: 0;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 120px;
    ::v-deep {
      .van-uploader__input {
        width: 120px;
        height: 120px;
      }
    }
  }
}
.profile {
  ::v-deep {
    .van-dialog__content {
      padding: 10px;
      .van-field {
        border: 1px solid #ccc;
      }
    }
  }
}
.mask {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  .confirm,
  .cancel {
    position: absolute;
    bottom: 0;
  }
  .confirm {
    left: 0;
  }
  .cancel {
    right: 0;
  }
}
</style>
